<template>
  <el-select
    ref="select"
    v-model="data"
    filterable
    remote
    clearable
    :placeholder="placeholder"
    :remote-show-suffix="remoteShowSuffix"
    :remote-method="select"
    :loading="loading"
    :disabled="disabled"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.value"
      @click="handleOptionClick(item)"
    >
      <span v-if="!labelSpaceBetween">{{ item.selectLabel }}</span>
      <span style="float: left" v-if="labelSpaceBetween">{{
        item.leftName
      }}</span>
      <span style="float: right" v-if="labelSpaceBetween">{{
        item.rigthName
      }}</span>
    </el-option>
  </el-select>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    modelData: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    urlType: {
      type: String,
      default: ''
    },
    urlQueryData: {
      type: String,
      default: ''
    },
    //初始化option
    option: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    labelSpaceBetween: {
      type: Boolean,
      default: false
    },
    remoteShowSuffix: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelData', 'getOption'],
  computed: {
    data: {
      get() {
        return this.modelData
      },
      set(value) {
        this.$emit('update:modelData', value)
      }
    }
  },
  data() {
    return {
      options: this.option,
      loading: false,
      ALLURL: {
        //客商管理API
        buenterprise: '/api/buenterprise/dropdownlist',
        //字典API
        dict: '/api/dictDetail/queryfilter',
        //港口API
        port: '/api/base/port/query',
        //船名（船舶信息）API
        // vessel: "/api/vesselInfo/dropDownList",
        // vessel: "/api/base/voyage/query",
        //包装单位API()
        package: '/api/base/package/query',
        //船名船次
        voyage: '/api/base/voyage/voyageDropDown',
        //人员API（用户接口）
        man: '/api/user/query',
        //海运航线
        tradelane: '/api/base/shipline/query'
      }
    }
  },
  methods: {
    handleClick() {
      this.select('')
    },
    select(queryName) {
      if (!this.ALLURL[this.urlType]) {
        throw new Error('urlType不存在')
      }
      this.loading = true
      this.$http
        .get(this.ALLURL[this.urlType], this.getQueryData(queryName))
        .then((res) => {
          if (this.urlType == 'buenterprise') {
            this.options = res.map((item) => {
              return {
                id: item.id,
                value: item.id,
                label: item.entName,
                selectLabel: `${item.entCode}|${item.entFullname}`,
                name: item.entName,
                leftName: item.entCode,
                rigthName: item.entFullname
              }
            })
          } else if (this.urlType == 'dict') {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: item.label,
                label: item.label,
                selectLabel: item.label
              }
            })
          } else if (this.urlType == 'port') {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: item.id,
                label: `${item.portName} | ${item.portEnName}`,
                selectLabel: `${item.portName} | ${item.portEnName}`
              }
            })
          } else if (this.urlType == 'package') {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: item.packageCode,
                label: item.packageName,
                selectLabel: item.packageName
              }
            })
          } else if (this.urlType == 'voyage') {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: item.veseel,
                label: item.veseel,
                selectLabel: `${item.veseel} | ${item.voyage}`,
                voyage: item.voyage
              }
            })
          } else if (this.urlType == 'man') {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: item.id,
                label: item.username,
                selectLabel: item.username
              }
            })
          } else if (this.urlType == 'tradelane') {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: item.id,
                label: item.shiplineName,
                selectLabel: item.shiplineName
              }
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    getQueryData(queryName) {
      if (this.urlType == 'buenterprise') {
        if (!this.urlQueryData) {
          throw new Error(`${this.urlType}必须需要urlQueryData`)
        } else {
          return {
            PageIndex: 1,
            PageSize: 50,
            Type: this.urlQueryData,
            KeyWords: queryName
          }
        }
      } else if (this.urlType == 'dict') {
        if (!this.urlQueryData) {
          throw new Error('dict必须需要urlQueryData')
        } else {
          return {
            PageIndex: 1,
            PageSize: 50,
            DictName: this.urlQueryData,
            Label: queryName
          }
        }
      } else if (this.urlType == 'port') {
        return {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: queryName
        }
      } else if (this.urlType == 'package') {
        return {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: queryName
        }
      } else if (this.urlType == 'voyage') {
        return {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: queryName
        }
      } else if (this.urlType == 'man') {
        return {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: queryName
        }
      } else if (this.urlType == 'tradelane') {
        return {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: queryName
        }
      }
    },
    /**
     * 返回选择的option
     * @param {object} data - 选择的option
     */
    handleOptionClick(data) {
      this.$emit('getOption', data)
    },
    // 选择数据的变动，用于清除港口将AllOption对应的数据清空
    handleChange(val) {
      this.$emit('handleChange', val)
    },
    focus() {
      this.$refs.select.focus()
    }
  },
  watch: {
    option(newVal) {
      this.options = newVal
    }
  },
  mounted() {}
})
</script>

<style lang="scss" scoped></style>
